<template>
  <div style="margin: 0 auto;">
    vue的函数式组件的 写法1 functional配置项
    <JsxFunctionComponent :node-type="1" xx="xxx"></JsxFunctionComponent>
    <JsxFunctionComponent :node-type="2"></JsxFunctionComponent>
    <JsxFunctionComponent :node-type="3"></JsxFunctionComponent>
    <hr>
    vue的函数式组件2的 写法 使用template function
    <JsxFunctionComponent2 :items="[1,2,3]" :itemClick="itemClick"></JsxFunctionComponent2>
    <JsxFunctionComponent2 :items="[{id:1,value:'a'},{id:2,value:'a2'}]" :style="{color:'red'}" :itemClick="itemClick"></JsxFunctionComponent2>
    <hr>
    <h3>普通jsx的使用</h3>
    <jsxCom a="a" b="b"></jsxCom>
    <hr>
    vue的动态组件的使用
    <div>
      <dynamicComponent node-type-str="el-button" > button </dynamicComponent>
      <dynamicComponent node-type-str="el-input" > </dynamicComponent>
    </div>
    <br>
    <br>
    <h3>jsx尝试递归渲染</h3>
    <test :a="10" :b="[1,2,3]"></test>
    <br>
    <hr>
    <h3>vue的单文件多组件</h3>
    <HelloWorld :msg="a"></HelloWorld>
    <HelloWorld2></HelloWorld2>

   <!-- <div v-for="item in imgList" v-imgAlart :key="item.id" :style=' { backgroundImage:"url("+item.bgc +")",width:"200px",height:"200px"} '></div>-->
    <hr>
  </div>
</template>

<script>
  // 仍然需要在 主组件components里声明
  const HelloWorld = {
    props: ['msg'],
    data(){
      return{
        a:"aaa222"
      }
    },
    methods:{
      clicks(a){
        console.log(a)
        // console.log(100)
      }
    },
    render() {
      return (
        <div>
          <el-button onclick={()=>this.clicks(this.a)}>{this.a}</el-button>
          <h1>Hello world 组件</h1>
          {/*<div>{this.msg}</div>*/}
        </div>
      );
    }
  };

  const HelloWorld2 = {
    props: ['msg'],
    data(){
      return{
        a:"HelloWorld2"
      }
    },
    methods:{
      clicks(a){
        console.log(a)
      }
    },
    render() {
      return (
        <div>
          <el-button onclick={()=>this.clicks(this.a)}>{this.a}</el-button>
          <h1>Hello world2组件</h1>
        </div>
      );
    }
  };

  import JsxFunctionComponent from "./components/JsxFunctionComponent.vue";
  import JsxFunctionComponent2 from "./components/JsxFunctionComponent2.vue";
  import jsxCom from "./components/jsx.vue";
  import test from "./components/test.vue";
  import dynamicComponent from "./components/dynamicComponent";
  export default {
    name: "index",
    components: {
      JsxFunctionComponent,
      JsxFunctionComponent2,
      dynamicComponent,
      jsxCom,
      test,
      HelloWorld,
      HelloWorld2
    },
    data() {
      return {
        a:"aaa",
        imgList:[
          {bgc:require('@/assets/flex常用.png')},
          {bgc:require('@/assets/子传父.png')},
        ]
      }
    },
    computed: {},
    created() {

    },
    methods: {
      itemClick(item){
        console.log(item)
      }
    }
  }
</script>

<style scoped>

</style>
